<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
        <title>Top-Lists</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="qrc:///web/css/jquery.mobile-1.4.5.min.css" />
    <script src="qrc:///web/js/jquery-1.11.1.min.js"></script>
    <script src="qrc:///web/top/main.js"></script>
    <script src="qrc:///web/js/jquery.mobile-1.4.5.min.js"></script>
    <link rel="stylesheet" href="qrc:///web/top/main.css" />

    <script src="qrc:///web/js/color-thief.min.js"></script>
    <link rel="stylesheet" href="qrc:///web/scroll.css" />
    <script src="qrc:///web/js/common.js"></script>


</head>
<!-- oncontextmenu="return false;" -->
<body  onselectstart="return false;" ondragstart="return false;" ondrop="return false;">

    <img style="display:none;" src="" id="coverImage" />

    <div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle='false'>
        <div data-role="tabs" id="tabs">
            <div data-role="navbar">
              <ul>
                <li><a onclick="$.mobile.changePage($('#top_tracks_page'));" >TOP TRACKS</a></li>
                <li><a onclick="$.mobile.changePage($('#top_albums_page'));" >TOP ALBUMS</a></li>
              </ul>
            </div>
         </div> <!--tabs-->
    </div><!-- /header -->
    <div class="ui-loader-background"> </div>
    <div id="top_tracks_page" data-role="page" data-theme="b" data-title="TOP TRACKS">
        <div role="main" class="ui-content">
        <h3>Select Country</h3>
                <!-- search sites -->
                <form class="ui-filterable">
                <input class="ui-icon-alt"  id="rich-autocomplete-input" data-type="search" placeholder="Search country">
                </form>
                <ul id="countries" data-role="listview" data-filter="true" data-inset="true" data-input="#rich-autocomplete-input">
                    <script>
                    $.each( countries, function( title, code ) {
                      $("#countries").append("<li style='cursor: pointer;' id='country' onclick='get_top_tracks(\""+$.trim(code)+"\")' data-filtertext='"+title+"'>"+title+"</li>");
                    });
                    </script>
                </ul>
            <ul class="list" id="top_tracks_result" data-role="listview" data-split-icon="gear" data-split-theme="b" data-inset="false">
            </ul>
        </div>
    </div>

    <div id="track_result_view_page" data-role="page" data-theme="b" data-title="TOP TRACKS">
        <div role="main" class="ui-content">
            <!--load data here-->
        </div>
        <div style="opacity:0.9" data-role="footer" data-position="fixed" data-tap-toggle="false">
            <a style="display: block;background-color: rgba(36, 142, 179, 0.5)" onclick="$.mobile.changePage($('#top_tracks_page'));" class="ui-mini ui-btn ui-icon-back ui-btn-icon-left ui-corner-all">Back</a>
        </div><!-- /footer -->
    </div>

    <div id="top_albums_page" data-role="page" data-theme="b" data-title="TOP ALBUMS">
        <div role="main" class="ui-content">
        <h3>Select Country</h3>
                <!-- search sites -->
                <form class="ui-filterable">
                <input class="ui-icon-alt"  id="rich-autocomplete-input_2" data-type="search" placeholder="Search country">
                </form>
                <ul id="countries_2" data-role="listview" data-filter="true" data-inset="true" data-input="#rich-autocomplete-input_2">
                    <script>
                    $.each( countries, function( title, code ) {
                      $("#countries_2").append("<li style='cursor: pointer;' id='country_2' onclick='get_top_albums(\""+$.trim(code)+"\")' data-filtertext='"+title+"'>"+title+"</li>");
                    });
                    </script>
                </ul>
            <ul class="list" id="top_albums_result" data-role="listview" data-split-icon="gear" data-split-theme="b" data-inset="false">
            </ul>
        </div>
    </div>

    <div id="albums_result_view_page" data-role="page" data-theme="b" data-title="TOP ALBUMS">
        <div role="main" class="ui-content">
            <!--load data here-->
        </div>
        <div style="opacity:0.9" data-role="footer" data-position="fixed" data-tap-toggle="false">
            <a style="display: block;background-color: rgba(36, 142, 179, 0.5)" onclick="$.mobile.changePage($('#top_albums_page'));" class="ui-mini ui-btn ui-icon-back ui-btn-icon-left ui-corner-all">Back</a>
        </div><!-- /footer -->
    </div>

    <div id="album_view_page" data-role="page" data-theme="b" data-title="ALBUMS VIEW">
        <div role="main" class="ui-content">
            <!--load data here-->
        </div>
        <div style="opacity:0.9" data-role="footer" data-position="fixed" data-tap-toggle="false">
            <a style="display: block;background-color: rgba(36, 142, 179, 0.5)" onclick="$.mobile.changePage($('#albums_result_view_page'));" class="ui-mini ui-btn ui-icon-back ui-btn-icon-left ui-corner-all">Back to Albums</a>
        </div><!-- /footer -->
    </div>

</body>
</html>
